<template>
  <view class="apply_easypay_qrcode_step4">
    <steps :active="4"></steps>
    <scroll-view class="scroll-wrap" :scroll-y="true">
      <view class="form-wrap">
        <form>
          <view class="form-item">
            <view class="form-item-head">
              <view class="title">
                商户入网协议
              </view>
              <view class="sample">
                <text>示例</text>
              </view>
            </view>
            <view class="form-item-content">
              <view class="common-img-wrap">
                <image src="../../../static/logo.png" mode="" class="img"></image>
                <view class="text">
                  上传入网协议证书
                </view>
              </view>
            </view>
          </view>
          
          <view class="form-item">
            <view class="form-item-head">
              <view class="title">
                门店外景照片
              </view>
              <view class="sample">
                <text>示例</text>
              </view>
            </view>
            <view class="form-item-content" style="display: flex;">
              <view class="common-img-wrap">
                <image src="../../../static/logo.png" mode="" class="img"></image>
                <view class="text">
                  上传身份证正面
                </view>
              </view>
            </view>
          </view>
          
          <view class="form-item">
            <view class="form-item-head">
              <view class="title">
                上传店内的环境照片
              </view>
              <view class="sample">
                <text>示例</text>
              </view>
            </view>
            <view class="form-item-other-content">
              <view class="common-img-wrap">
                <image src="../../../static/logo.png" mode="" class="img"></image>
                <view class="" style="margin-left: 45rpx;">
                  <view class="text-1">
                    上传图片
                  </view>
                  <view class="text-2">
                    上传身份证正面
                  </view>
                </view>
                
              </view>
            </view>
          </view>
        </form>
      </view>
    </scroll-view>
    
    
    <view class="qrcode_selected_platform-footer">
      <button type="primary" class="qrcode_selected_platform-footer-btn" @click="nextStep">提交申请</button>
    </view>
  </view>
  
</template>

<script>
import steps from '../common/steps.vue'
export default {
  components: {
    steps
  },
  data () {
    return {}
  },
  methods: {
    nextStep () {
      uni.navigateTo({
        url: '/pages/qrCode/applyEasypay/step3'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .scroll-wrap {
    height: calc(100vh - 52px - 101px);
  }
  .form-wrap {
    background-color: #FFFFFF;
    padding: 0 34rpx 22rpx;
    margin-top: 30rpx;
    .form-item {
      .form-item-head {
        overflow: hidden;
        padding-top: 40rpx;
        .title {
          float: left;
          color: #333333;
          font-size: 36rpx;
        }
        .sample {
          float: right;
          text {
            color: #FF7473;
            font-size: 28rpx;
            text-decoration: underline;
          }
        }
        &:after {
          clear: both;
        }
      }
      .form-item-content {
        margin-top: 30rpx;
        .common-img-wrap {
          width: 330rpx;
          height: 200rpx;
          border: 1px dashed #E1E1E1;
          border-radius: 16rpx;
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: center;
          .img {
            width: 80rpx;
            height: 80rpx;
          }
          .text {
            margin-top: 29rpx;
            color: #666666;
            font-size: 24rpx;
            font-weight:500;
          }
        }
      }
      
      .form-item-other-content {
        margin-top: 30rpx;
        .common-img-wrap {
          width: 100%;
          height: 200rpx;
          border: 1px dashed #E1E1E1;
          border-radius: 16rpx;
          display: flex;
          // flex-flow: column;
          align-items: center;
          // justify-content: center;
          .img {
            width: 38rpx;
            height: 30rpx;
            margin-left: 46rpx;
          }
          .text-1 {
            // margin-top: 29rpx;
            color: #333333;
            font-size: 26rpx;
            font-weight:500;
          }
          .text-2 {
            margin-top: 15rpx;
            color: #999999;
            font-size: 22rpx;
          }
        }
      }
    }  
  }
  
  .tip-wrap {
    background-color: #FFFFFF;
    padding: 40rpx 22rpx;
    margin-top: 30rpx;
    .head {
      
      .title {
        color: #333333;
        font-size: 36rpx;
      }
      .desc {
        margin-top: 19rpx;
        color: #333333;
        font-size: 24rpx;
        
        .warning-info {
          margin-left: 18rpx;
          color: #FF7473;
        }
      }
    }
    .content {
      display: flex;
      justify-content: space-between;
      margin-top: 40rpx;
      .sub-content {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .img {
          width: 140rpx;
          height: 112rpx;
        }
        .text {
          margin-top: 26rpx;
          font-size: 24rpx;
          color: #333333;
        }
      }
    }
  }
  .qrcode_selected_platform-footer {
    position: absolute;
    bottom: 0rpx;
    left: 0rpx;
    width: 100%;
    height: 105rpx;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1rpx solid #E1E1E1;
    .qrcode_selected_platform-footer-btn {
      width: 687rpx;
      height: 70rpx;
      background-color: #434343;
      color: #F6DA99;
      font-size: 30rpx;
    }
  }
</style>
